<template>
  <div>
    <transition name="search"></transition>
    <transition appear appear-active-class="fadeIn">
      <Header
        @startSearch="startSearch"
        @endSearch="endSearch"
        @showChangeUser="showChangeUser"
      ></Header>
    </transition>
    <!-- <transition name="search">
      <change-user v-show="ifChangeUser"></change-user>
    </transition> -->
    <transition appear appear-active-class="fadeIn">
      <div
        ref="PCIndex"
        class="PCindex"
        :style="{ height: innerH + 'px' }"
        style="max-width: 62%; background-color: rgba(255, 255, 255, 0.6)"
      >
        <router-view></router-view>
      </div>
    </transition>
  </div>
</template>

<script lang="ts" setup>
import Header from "./header.vue";
import Bus from "../../bus";
//改变用户信息 头像和昵称
import { useRoute } from "vue-router";
import { onMounted, ref, onBeforeUnmount, computed, watch } from "vue";
import { maxWidthRouter } from "./const";
const route = useRoute();
onMounted(() => {
  MsgChange();
  changeStyleByRouter();
});
onBeforeUnmount(() => {
  Bus.$off("finishChange");
});

const ifSearch = ref<boolean>(false);
const ifChangeUser = ref<boolean>(false);
const changeUserMsg = ref<string>("上传成功"); //修改用户头像或昵称
const showChangeUserStatus = ref<boolean>(false); //成功提示 Msg显示
const msgWay = ref<string>("success");
const PCIndex = ref<HTMLDivElement | null>(null);

const innerH = computed(() =>
  document.body.clientWidth < 765 ? window.innerHeight - 50 : false
);

watch(route, () => {
  changeStyleByRouter();
});

// 修改样式
const changeStyleByRouter = () => {
  PCIndex.value && (PCIndex.value.style.backgroundColor = "rgba(255,255,255,0.6)");
  PCIndex.value && (PCIndex.value.style.maxWidth = "62%");

  if (maxWidthRouter.find((item) => route.path.split("/").includes(item))) {
    PCIndex.value && (PCIndex.value.style.maxWidth = "100%");
  } else if (/\home/.test(route.path)) {
    PCIndex.value && (PCIndex.value.style.backgroundColor = "transparent");
  }
};

const MsgChange = () => {
  Bus.$on("finishChange", (msg: string) => {
    setTimeout(() => {
      showChangeUserStatus.value = false;
    }, 2000);
    msgWay.value = msg;
    msg == "success"
      ? (changeUserMsg.value = "修改成功")
      : (changeUserMsg.value = "修改失败");
    showChangeUserStatus.value = true;
  });
};
const showChangeUser = () => {
  ifChangeUser.value = !ifChangeUser.value;
};

const startSearch = () => {
  ifSearch.value = true;
};
const endSearch = () => {
  setTimeout(() => {
    ifSearch.value = false;
  }, 300);
};
</script>

<style lang="scss" scoped>
@import url("../../css/pc/index.scss");
// @import url("../../css/mobile/mvindex.scss");
@import url("../../css/comment/animate.css");
.write {
  position: absolute;
  width: 100%;
  left: 0;
  top: 40px;
  z-index: 999;
}

.search-enter,
.search-leave-to {
  opacity: 0;
  transform: translateY(-300px);
}
.search-enter-active,
.search-leave-active {
  transition: all 0.5s;
}
</style>
